<template>
  <div class="block">
    <div class="demonstration title" >{{title}}</div>
    <el-date-picker
      v-model="timer"
      type="daterange"
      range-separator="--"
      start-placeholder="请选择"
      @change="changetime"
      end-placeholder="请选择">
    </el-date-picker>
  </div>
</template>

<script>
import moment from 'moment'
export default {
    name:'time-view',
    props:{
        title:{
            type:String
        },
        value:{
          type:String
        }
    },
    data() {
        return {
           timer:'',
           alltime:''
        };
    },
    created(){
    },
    watch:{
      value: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.alltime = newVal;
      },
      deep: true,
      immediate: true,
    },
    },
    methods:{
      changetime(val){
        // console.log(val);
        const res1 = moment(val[0]).valueOf()
        const res2 = moment(val[1]).valueOf()
        this.alltime = [res1,res2].join(',')
        this.$emit('input',this.alltime)
        // console.log(this.alltime);

      }
    }
}
</script>

<style lang="scss" scoped>
.block{
    margin-left: 30px;
}
.title{
  font-size: 14px;
  font-weight: 400;
}
 ::v-deep .el-input__inner{
    height: 32px !important;
    margin-top: 5px;
 }
</style>